<template>
  <div class="container">
    <editor-content :editor="editor" class="zeditor" />
    <div v-if="editor" class="pm_menu">
        <component :editor="editor" :is="menu" v-for="menu in menus" :key="menu" />
    </div>
    <bubble_menu_link v-if="editor" :editor="editor" />
    <bubble_menu_emoji v-if="editor" :editor="editor" />
  </div>
</template>

<script>
import {
    Editor,
    EditorContent
} from '@tiptap/vue-3'
import {
  mergeAttributes,
} from '@tiptap/core'
import Dropcursor from "@tiptap/extension-dropcursor";
import Gapcursor from "@tiptap/extension-gapcursor";
import History from '@tiptap/extension-history'
import Placeholder from "@tiptap/extension-placeholder";

import Document from "@tiptap/extension-document";
import Paragraph from "@tiptap/extension-paragraph";
import Text from "@tiptap/extension-text";
import _Bold from "@tiptap/extension-bold";
const Bold = _Bold.extend({
    renderHTML({ HTMLAttributes }) {
    return ['b', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]
  }
})

import Italic from "@tiptap/extension-italic";
import Strike from "@tiptap/extension-strike";
import Underline from "@tiptap/extension-underline";
import _Link from "@tiptap/extension-link";
const Link = _Link.extend({
})
import emoji from './packages/extension_emoji';
import Code from "@tiptap/extension-code";
import Blockquote from "@tiptap/extension-blockquote";

import {} from "./assets/iconfont/iconfont.js";
import menu from './menu'
import bubble_menu from "./bubble_menu/"

export default {
    components: {
        EditorContent,
        ...menu,
        ...bubble_menu
    },

    data() {
        return {
            editor: null,
            menus: ["bold",
                "italic",
                "underline",
                "strike",
                "blockquote",
                "i_code",
                "i_link",
                "emoji",],
                showcontentStr: "",
        }
    },
    props: {
        content: {
            type: String,
            default: ""
        }
    },
    watch: {
        content: {
            handler(newVal) {
                this?.editor?.commands?.setContent(newVal)
            },
            immediate: true
        }
    },

    mounted() {
        window.editor = 
        this.editor = new Editor({
            content: this.content,
            extensions: [Dropcursor,Gapcursor,History,Placeholder,Document,Paragraph,Text,Bold,Italic,Strike,Underline,
            Link.configure({
                openOnClick:false,
                protocols: ['http', 'https', 'mailto', 'tel', 'ftp', 'sftp', 'file', 'sms', 'magnet', 'map', 'whatsapp','tg'],
                HTMLAttributes: {
                    target: null,
                    rel: null
                }
                }),
            Code,Blockquote,emoji],
        })
        this.editor.on('update', () => {
            this.$emit('update:content', this.editor.getHTML());
        });
    },

    beforeUnmount() {
        this.editor.destroy()
    },
    methods: {
        handleContentChange() {
            this.showcontentStr = this.editor.getHTML()
        },
        setContent(content) {
            this.editor.commands.setContent(content)
        },
        getHTML() {
            return this.editor.getHTML();
            // this.showcontentStr = this.editor.getHTML().replace(/<p>/g, "").replace(/<\/p>/g, "\n\n")
        },
        getText() {
            return this.editor.getText();
            // this.showcontentStr = this.editor.getText()
        },
    }
}
</script>
<style lang="scss">
@use './assets/prosemirror-menu';

.container {
    background: linear-gradient(to bottom, #D5E5FD, #FBFDFF );
    padding: 20px;
}
.zeditor {
    .tiptap{
        min-height: 200px;
        border: 0px solid #c1c9ce;
        background-color: #fff;
        padding: 12px 16px 0 16px;;
        border-radius: 10px 10px 0 0;
        line-height: 1.8;
        &:focus {
            outline: none;
        }
        blockquote{
            padding: 6px;
            margin: 0 0 0 0;
            border-left: 6px solid #D5E5FD;
            background-color: #fafafa;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 400;
            color: #333;
        }
        code{
            padding: 2px 4px;
            font-size: 90%;
            color: #5C89F9;
            background-color: #D5E5FD;
            border-radius: 4px;
        }
        pre{
            padding: 6px;
            margin: 0 0 0 0;
            border-left: 6px solid #e8e8e8;
            background-color: #fff;
            border-radius: 6px 0 0 6px;
            font-size: 14px;
            font-weight: 400;
        }
        p{
            padding:0;
            margin: 0;
        }
        a{
            color: #5C89F9;
        }
    }
}
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}


</style>